<template>
  <view class="flex" style="background: #F2F2F2;">
    <pcNavigation></pcNavigation>
    <view class="flex-sub flex flex-column justify-center" style="height: 100vh;position:relative;">
      <view style="height: 98%;" class="flex flex-column surnameList">
        <view class="mr_20">
          <view class="bg_FFFFFF flex flex-column"
                style="border-radius: 16rpx;padding: 10rpx 0;font-family: Source Han Sans CN, Source Han Sans CN;"
          >
            <view
              class="flex align-center justify-between"
            >
              <view style="width: 100%;padding: 20rpx 0;border-bottom: 2rpx solid #E8E8E8"
                    class="flex align-center justify-between">
                <view class="flex align-end" style="margin-left: 40rpx;">
                  <view class="flex align-center">
                    <view style="width: 8rpx;height: 36rpx;border-radius: 14rpx;background: #FF440A"></view>
                    <view style="font-size: 56rpx;color: #363636;margin-left: 10rpx;white-space: nowrap" class="fw_500">
                      家庭列表
                    </view>
                  </view>
                  <view style="font-size: 40rpx;color: #5C5C5C;margin-left: 20rpx;white-space: nowrap" class="fw_500">
                    再小的家庭 也可以有传承
                  </view>
                </view>
                <view
                  style="background: #FFFFFF;border-radius: 30rpx;border: 2rpx solid #BCBCBC;padding: 10rpx 20rpx;margin-right: 40rpx;cursor:pointer;"
                  class="flex align-center justify-center"
                  @click.stop="addFamily"
                >
                  <image :src="`${IMG_URL}/index/pc_familyCulture_add.png`" style="width: 30rpx;height: 30rpx;"></image>
                  <view style="margin-left: 10rpx;font-size: 22rpx;font-weight: 500;color: #363636;">新建家庭</view>
                </view>
              </view>
            </view>
            <view style="overflow: hidden;padding: 10rpx 10rpx" class="flex">
              <scroll-view scroll-x="true" style="white-space: nowrap;" class="flex-sub">
                <view class="flex align-center">
                  <view v-for="(item,index) in familyList"
                        :key="index"
                        style="border-radius: 8px;border: 2px solid #EDEDED;display: inline-block;margin-right: 10px;cursor:pointer;padding: 5rpx 10rpx"
                        :style="{
                          background: index === state.selectFamilyIndex ? '#FFEAEA' : '#FFFFFF',
                          border: index === state.selectFamilyIndex ? '2px solid #FF440A' : '2px solid #EDEDED',
                        }"
                        @click.stop="selectFamily(index)"
                  >
                    <view class="flex align-center;" style="height: 100%;">
                      <view style="border-radius: 12px;overflow: hidden;margin:auto 10px;">
                        <image v-if="!item.cover_lsit || item.cover_lsit.length <= 0 || !is_login"
                               :src="`${nc_image}/assets/UNIAPP/001.png`"
                               style="width: 184px;height: 125px;"
                        ></image>
                        <swiper v-else
                                style="width: 184px;height: 125px;"
                                autoplay
                                circular
                                indicator-color="rgba(255,255,255,0.1)"
                                indicator-active-color="#fff"
                                :interval="3000"
                                :duration="500"
                        >
                          <block v-for="(item,index) in item.cover_lsit" :key="index">
                            <swiper-item>
                              <!--                    <navigator :url="item.url">-->
                              <image :src="item" style="width: 184px;height: 125px;" mode="aspectFill" />
                              <!--                    </navigator>-->
                            </swiper-item>
                          </block>
                        </swiper>
                      </view>
                      <view class="flex align-start flex-column justify-center">
                        <view style="font-size: 24px;color: #6C6C6C;font-weight: bold;">
                          {{ item.name }}
                        </view>
                        <view style="font-size: 18px;color: #6C6C6C;font-weight: 400;margin-top: 10px;">
                          家庭号: {{ item.family_id }}
                        </view>
                        <view style="font-size: 18px;color: #6C6C6C;font-weight: 400;margin-top: 10px;"
                              class="flex align-center">
                          <view>发起人: {{ item.create_user_name }}</view>
                          <view style="margin-left: 10px;">人数: {{ item.member_count }}</view>
                        </view>
                      </view>
                    </view>
                  </view>
                </view>
              </scroll-view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <s-first-popup ref="familyMemberPopUp" @closePopup="nameBoxClose">
      <template #content>
        <view class="familyMemberPopUp flex flex-column align-center">
          <view class="familyMemberPopUp_title mt_45">
            <view class="familyMemberPopUp_title_name">
              新建家庭
            </view>
          </view>
          <image class="familyMemberPopUp_icon z_1" :src="`${IMG_URL}/index/add_icon.png`"></image>
          <view class="familyMemberPopUp_editInfo flex align-center justify-between mt_64">
            <input type="text" v-model="state.familyName"
                   placeholder="请输入家庭名称"
                   placeholder-class="familyMemberPopUp_editInfo_placeholder"
            >
          </view>
        </view>
      </template>
    </s-first-popup>
  </view>
</template>

<script setup>
  import PcNavigation from '@/pages/pc/pcComponents/pcNavigation.vue';
  import sheep from '@/sheep';
  import { onReady } from '@dcloudio/uni-app';
  import { computed, reactive, ref } from 'vue';

  const state = reactive({
    selectFamilyIndex: 0,
    familyName: '',
  });

  const IMG_URL = computed(() => sheep.$store('AI').sq_image_path);
  const nc_image = computed(() => sheep.$store('AI').nc_image);
  const familyList = computed(() => sheep.$store('family').list);

  onReady(() => {
    sheep.$store('pc').setSidebarOptions(1);
    sheep.$store('family').getList();
  });

  const familyMemberPopUp = ref();
  const addFamily = () => {
    familyMemberPopUp._value.openPopup({
      title: '',
      maskClick: false,
      confirm: async () => {
        if (!state.familyName) {
          uni.showToast({
            title: '请输入家庭名称',
            icon: 'none',
          });
          return;
        }
        const { code } = await sheep.$api.family.createFamily({
          name: state.familyName,
        });
        if (code == 1) {
          familyMemberPopUp._value.closePopup();
          sheep.$store('family').getList();
          uni.showToast({
            title: '创建成功',
            icon: 'none',
          });
        }
      },
    });
  };

  const selectFamily = (index) => {
    state.selectFamilyIndex = index;
  };

  function nameBoxClose(){
    familyMemberPopUp._value.closePopup();
  }
</script>


<style scoped lang="scss">
  .surnameList {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    width: 100%;
    height: 100%;
  }

  .familyMemberPopUp_icon {
    width: 147rpx;
    height: 147rpx;
    position: absolute;
    top: 0;
    right: 0;
  }

  .familyMemberPopUp_title {
    width: 454rpx;

    .familyMemberPopUp_title_name {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 48rpx;
      color: #292929;

    }

    .familyMemberPopUp_title_detail {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 24rpx;
      color: #9F9F9F;
    }
  }

  .familyMemberPopUp_editInfo {
    padding: 10px 15px;
    background: #F5F5F5;
    border-radius: 20px;
    text-align: center;
  }
</style>
